<template>
	<view>
		<view class="background"></view>
		<navView :navTitle="title" backgroundColor="#008efe" titleColor="#fff" :isBack="true"> </navView>
		<view class="list">
			<view class="item" v-for="(item, index) in folderList" :key="index" @tap="go_file(item.id)">
				<view class="left">
					<image src="https://hfd.bjlzkj.com/static/user/folder.png" class="avatar" mode=""></image>
					<view class="name">
						{{ item.folder_name }}
					</view>
				</view>
				<view class="right">
					<uni-icons type="right" size="25rpx" color="#333"></uni-icons>
				</view>
			</view>
		</view>
		<image @click="createFolder" class="addimg" src="https://hfd.bjlzkj.com/static/user/add.png" mode=""></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			category: "",
			title:"资料库",
			folderList: {},
		}
	},
	onLoad(options) {
		this.category = options.category
		if (options.category == "category1") {
			this.title = "收集箱"
			this.category = "category1"
		}
		this.getUserFolder();
	},
	methods: {
		go_file(id) {
			uni.navigateTo({
				url: '/pages/dataBank/file?id=' + id + '&category=' + this.category
			})
		},
		getUserFolder() {
			this.$request('/addons/qingdong/folder/getUserFolder', 'GET', {
				category: this.category
			}).then(res => {
				this.folderList = res.data
			})
		},
		createFolder() {
			uni.showModal({
				title: '创建文件夹',
				content: '请输入文件夹名称',
				placeholder: '请输入文件夹名称',
				editable: true,
				placeholderText: "请输入文件夹名称",
				success: (res) => {
					if (res.confirm) {
						const folderName = res.content;
						if (folderName) {
							this.$request('/addons/qingdong/folder/createFolder', 'POST', {
								category: this.category,
								folder_name: folderName
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({ title: '创建成功' });
									this.getUserFolder();
								} else {
									uni.showToast({ title: '创建失败' });
								}
							})
						} else {
							uni.showToast({ title: '请输入文件夹名称' });
						}
					}
				}
			});
		}
	}
}
</script>

<style lang="less">
.background {
	background: #f5f6f9;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.list {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.left {
			display: flex;
			align-items: center;

			.avatar {
				width: 81rpx;
				height: 81rpx;
				border-radius: 50%;
			}

			.name {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				margin-left: 30rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;

			.uni-icons {
				margin-left: 20rpx;
			}
		}
	}
}

.addimg {
	width: 96rpx;
	height: 96rpx;
	position: fixed;
	bottom: 120rpx;
	right: 40rpx;
}
</style>